<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core">

   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="Mensch ärgere dich nicht Spiel."/>
        <meta name="keywords" content="Spiel Mensch ärgere dich nicht"/>

     
        <title>Mensch ärgere dich nicht!</title>
    </head>
	<body>
		<ui:composition template="./template.xhtml">
		<ui:define name="navigation">
		<ul>
			<li><h:link outcome="login.xhtml" value="#{msg.backtologin}" /></li>
		</ul>
		</ui:define>
		
		<ui:define name="main">
					<h2>#{msg.register}</h2>
					<p>#{msg.fillinform}</p>
				
					<h:form action="#" method="post" id="sendeRegistrierung">
					<h3><span xml:lang="en">#{msg.logindata}</span></h3>
					<div class="formblock">
						<fieldset>
							<div class="row">
								<h:outputLabel class="Float" value="#{msg.username}" for="username"  />
								<h:inputText class="Float" id="username" value="#{registerController.player.userName}" required="true" requiredMessage="#{msg.nousername}">
								<f:validateLength minimum="2"  />
								<f:validateRegex pattern="[a-zA-Z]*" />
								</h:inputText>
								<h:message for="username" class="errorMessage" />
							</div>

							<div class="row">
								<h:outputLabel class="Float" value="#{msg.password}" for="password" />
								<h:inputSecret class="Float" id="password" value="#{registerController.player.password}" required="true" requiredMessage="#{msg.nopassword}" >
									<f:validateLength minimum="3" />
<!-- 									<f:validateRegex pattern="[a-zA-Z]*" /> -->
								</h:inputSecret>
								<h:message for="password" class="errorMessage"/>
							</div>
						</fieldset>
					</div>
					
						<h:selectBooleanCheckbox id="showPersonalData" immediate="true" value="#{registerController.personalData}" 
							valueChangeListener="#{registerController.togglePersonalData}" onchange="this.form.submit()" />
							<h:outputLabel for="showPersonalData" class="" value="#{msg.showpersonaldata}" />
							
					
					<h:panelGroup rendered="#{registerController.personalData}">
					<h3>#{msg.personaldata}</h3>

					<div class="formblock">
					<fieldset>
						<div class="row">
				                <h:outputLabel class="Float" value="#{msg.firstname}" for="firstname" />
								<h:inputText class="Float" id="firstname" value="#{registerController.player.name}" required="true" requiredMessage="#{msg.nofirstname}">
									<f:validateLength minimum="1"  />
									<f:validateRegex pattern="[a-zA-Z]*" />
								</h:inputText>
								<h:message for="firstname" class="errorMessage"/>
						</div>
						<div class="row">
							<h:outputLabel class="Float" value="#{msg.lastname}" for="lastname" />
								<h:inputText class="Float" id="lastname" value="#{registerController.player.lastName}" required="true" requiredMessage="#{msg.nolastname}">
									<f:validateLength minimum="1"  />
									<f:validateRegex pattern="[a-zA-Z]*" />
								</h:inputText>
								<h:message for="lastname" class="errorMessage"/>
						</div>
						<div class="row">
							<h:outputLabel class="Float" value="#{msg.birthdate}" for="dateofbirth" />
								<h:inputText class="Float" id="dateofbirth" value="#{registerController.player.birthdate}" required="true" requiredMessage="#{msg.nobirthdate}" >
									<f:validator validatorId="validator.MyDateValidator" />
								</h:inputText>
								<h:message for="dateofbirth" class="errorMessage"/>
								
						</div>
						<div class="row">
							<h:outputLabel  class="Float" value="#{msg.sex}" for="sex"  />
							<h:selectOneMenu id="sex" required="true" requiredMessage="#{msg.nosex}" value="#{registerController.player.sex}">
								 <f:selectItem itemValue="#{msg.sexfemale}" itemLabel="#{msg.sexfemale}"/>
								 <f:selectItem itemValue="#{msg.sexmale}" itemLabel="#{msg.sexmale}"/>
							</h:selectOneMenu>
							<h:message for="sex" class="errorMessage"/>
					               
						</div>
					</fieldset>
					</div>
					</h:panelGroup>
					<div id="buttons">
						<h:commandButton binding="#{registerController.submitButton}" id="submitButton" value="#{msg.register}" accesskey="r" action="#{registerController.register}" rendered="true"/>
						<h:message for="submitButton" class="errorMessage"/>
					</div>
					</h:form>
		</ui:define>
		</ui:composition>
	</body>
</html>